<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/template/mainLayout.xhtml" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
	<ui:define name="content">
		<div class="container">
			<h2>#{msg.reserva}</h2>
			<div class="subContainer eheight">
				<h:form>
					<p:growl id="growl" showDetail="true" />
					
					<h:panelGrid columns="2">
						<h:outputLabel value="#{msg.dados_imovel}"/>
						<h:outputLabel value="#{reservaBean.locacao.imovel.capacidade}"/>
						
						<h:outputLabel value="#{msg.chegada}"/>
						<h:inputText value="#{reservaBean.locacao.inicio}">
							<f:convertDateTime pattern="dd/MM/yyyy"/>
							<f:ajax event="change" render="calendar script"/>
						</h:inputText>
						
						<h:outputLabel value="#{msg.saida}"/>
						<h:inputText value="#{reservaBean.locacao.fim}">
							<f:convertDateTime pattern="dd/MM/yyyy"/>
							<f:ajax event="change" render="calendar script"/>
						</h:inputText>
						
						<h:outputLabel value="#{msg.dados_inquilino}"/>
						<h:panelGroup/>
						
						<h:outputLabel value="#{msg.nome}"/>
						<h:inputText value="#{reservaBean.locacao.responsavel.nome}"/>
						<h:outputLabel value="#{msg.cpf}"/>
						<h:inputText value="#{reservaBean.locacao.responsavel.cpf}"/>
						<h:outputLabel value="#{msg.email}"/>
						<h:inputText value="#{reservaBean.locacao.responsavel.email}"/>
						<h:outputLabel value="#{msg.telefone_residencial}"/>
						<h:inputText value="#{reservaBean.locacao.responsavel.telFixo}"/>
						<h:outputLabel value="#{msg.telefone_celular}"/>
						<h:inputText value="#{reservaBean.locacao.responsavel.telMovel}"/>
						<h:outputLabel value="#{msg.telefone_comercial}"/>
						<h:inputText value="#{reservaBean.locacao.responsavel.telComercial}"/>
						
						<h:outputLabel value="#{msg.cep}"/>
						<h:inputText value="#{reservaBean.locacao.responsavel.endereco.cep}"/>
						<h:outputLabel value="#{msg.endereco}"/>
						<h:inputText value="#{reservaBean.locacao.responsavel.endereco.logradouro}"/>
						<h:outputLabel value="#{msg.bairro}"/>
						<h:inputText value="#{reservaBean.locacao.responsavel.endereco.bairro}"/>
						<h:outputLabel value="#{msg.cidade}"/>
						<h:inputText value="#{reservaBean.locacao.responsavel.endereco.cidade}"/>
						<h:outputLabel value="#{msg.estado}"/>
						<h:inputText value="#{reservaBean.locacao.responsavel.endereco.estado}"/>
						<h:outputLabel value="#{msg.referencia}"/>
						<h:inputText value="#{reservaBean.locacao.responsavel.endereco.referencia}"/>
						
					</h:panelGrid>
					
					<p:commandButton value="#{msg.send}" action="#{reservaBean.salvar}" update="growl"/>
					<p:calendar id="calendar" widgetVar="cal" mode="inline" pages="3" value="#{reservaBean.locacao.inicio}" />
					
					<h:panelGroup id="script">
						<script type="text/javascript" charset="utf-8">
							$(function() {
								var bookedDays = [ #{reservaBean.bookedDays} ];
								var dateInterval = [ #{reservaBean.dateInterval}];
				
								function checkDate(date) {
									var dateAsString = date.getDate() + "/" + (date.getMonth() + 1).toString() + "/" + date.getFullYear().toString();
									return [$.inArray(dateAsString, bookedDays) == -1, $.inArray(dateAsString, dateInterval) != -1 ? "ui-datepicker-marked" : ""];
								}
				
								cal.jqEl.datepicker("option", "beforeShowDay", checkDate);
							});
						
							$(document).ready(function(){
								$("#reserva").addClass("active");
							});
						</script>
					</h:panelGroup>
				</h:form>
			</div>
		</div>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function(){
				$("#reserva").addClass("active");
			});
		</script>
	</ui:define>
</ui:composition>
